<template>
     <el-container>
    <el-header style="text-align: left;flex-direction: row;display: flex;align-items: center; font-size: 12px">
      <el-button type="primary" @click="FormVisible = true">创建项目</el-button>
        <el-form :inline="true" style="display: flex;flex-direction: row; margin-left: 10px;" class="demo-form-inline">


            <el-form-item>
                <el-input v-model="serch" placeholder="请输入搜索项目名称"></el-input>
                <el-button icon="el-icon-search"   circle ></el-button>
            </el-form-item>
        </el-form>

    </el-header>
    
    <el-main>
      <el-table :data="tableData" :cell-style="serchclick">
        <el-table-column  label="序号" width="100">
          <template slot-scope="scope">
            {{scope.$index+1}} 
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="name" label="项目名称">
        </el-table-column>
        <el-table-column prop="key" label="ProductKey">
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" >
        </el-table-column>
        <el-table-column  fixed="right" label="操作" >
           
            <template slot-scope="scope">
               <el-button type="text" size="small" @click="goToDevice(scope.row.name)">查看</el-button>
            <el-button type="text" size="small" @click="toUpdatePage(scope.row.id)" >升级配置</el-button>
          </template>
           
        </el-table-column>
      </el-table>
    </el-main>


     <el-dialog title="创建项目" :visible.sync="FormVisible">
          <el-form :model="form" >
              <el-form-item label="项目名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="key" :label-width="formLabelWidth">
              <el-input v-model="form.key" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="项目描述" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="form.desc" autocomplete="off"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="FormVisible = false">取 消</el-button>
              <el-button type="primary" @click="formSubmit()">确 定</el-button>
          </div>
        </el-dialog>


  </el-container>


    

</template>

<script>
    import {Axios} from "../../../static/util";

    export default {
        name:"pl",
        methods:{
            formSubmit() {
              let self = this;
              Axios(
                'post',
                'http://127.0.0.1:5000/project/add',
                self.form,
                (res)=>{
                if (res.data.code != "200"){
                    this.$message.warning('错误:'+res.data.msg);
                    
                }else{
                  console.log(res);
                  self.FormVisible = false;
                }
                  
              });
            },

            serchclick({row,colnum,rowIndex,columnIndex}){
            //   console.log(1,this.serch,row['productname']);
                if((! row['name'].includes(this.serch)) && this.serch != '' ){
                    return 'display:none';
                }
                
            },
            toUpdatePage(key){
              this.$router.push({ path:'/updatePage', query:{ key: key }});
            },
            goToDevice(name){
              this.$emit('goToDevice',name);
            }
        },
        data() {
            return {
                tableData: [
             
              ],
                serch: '',
                form: {
                    name: '',
                    key: '',
                    desc: '',
                    user_id: '',
                },
                formLabelWidth: '120px',
                FormVisible: false,

            }
        },
        created(){

          if(this.$global.is_login){
              let self = this;
              Axios(
                'get',
                'http://127.0.0.1:5000/project',
                {
                },
                (res)=>{
                  if(res.data.code == '2100'){
                      this.$cookies.remove('_token');
                      this.$cookies.remove('_uname');
                      this.$cookies.remove('_uid');
                      this.$cookies.remove('_adm');
                      this.$router.go(0);
                  }
                  self.tableData = res.data.data;
                  
                  
                });
          }else{
             self.tableData = [];
          }
        
        }

    }
</script>

<style>
 .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
  .el-form{
     flex: 1;
  }
  .el-form-item{
   flex: 1;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
   
  }
  .el-form-item__content{
    width: 100%;
     display: flex !important;
    flex-direction: row;
    align-items: center;

  }
  .el-input{
    width: 50%;
    margin-right: 10px;
  }
</style>
